<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎登陆</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style-type: none;
			}
			body{
				background-color: rgb(222,225,230);
			}
			.nav{
				background-color: rgb(241,243,244);
			}
			.nav h1{
				text-align: center;
				font-size: 80px;
				padding: 20px;
			}
			.location{
				width: 500px;
				height: 600px;
				margin: 200px auto;
				background-color: rgb(255,255,255);
			}
			.message form{
				display: block;
				float: left;
				font-size: 25px;
				margin: 166px 115px;
			}
			.message input{
				margin: 20px auto;
			}
			.lon {
				font-size: 20px;
				margin-left: 70px;
			}
			.register {
				font-size: 20px;
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<h1>学生登录入口</h1>
		</div>
		<div class="location">
			<div class="message">
				<form action="${path}/admlog?method=login" method="post">
					<table>
						<tr><th>用户名</th><td><input type="text" name="name" onblur="checkName()"/></td><td><span></span></td></tr>
						<tr><th>密码</th><td><input type="password" name="password"/></td></tr>
						<tr><th>验证码</th><td><input type="text" name="checkCode"/></td><td><img src="${path}/checkImg"></td></tr>
					</table>
					<button type="submit" class="lon">登录</button>
					<button type="button" class="register">注册</button>
				</form>
			</div>
		</div>
	</body> 
	<script type="text/javascript">
		function checkName() {
			var reg = /^\w{5,10}$/;
			var str = $(".message input:eq(0)").val();
			var result = reg.test(str);
			console.log(result);
			if(!result){
				$(".message tr:eq(0) span").html("请输入包含字母，数字，下划线的5~10位用户名");
				$(".message tr:eq(0) span").css("color","red");
				$(".lon").attr("type","button");
			} else {
				$(".lon").attr("type","submit");
				$(".message tr:eq(0) span").html("✔");
				$(".message tr:eq(0) span").css("color","green");
			}
		}
	</script>
</html>